
<template>
  <div>
    <a-modal v-model="visible" centered :title="title" width="600px" @cancel="close" :destroyOnClose="true" @ok="handleOk" :maskClosable="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="role" label="分享角色" prop="role">
          <a-select v-model="form.role" placeholder="请选择">
            <a-select-option v-for="(item, index) in roleList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="brand" label="引流小程序" prop="brand">
          <a-select v-model="form.brand" placeholder="请选择">
            <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.brandId">{{ item.brandName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="type" label="内容类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择">
            <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { shareRoleList, brandList } from '@/api/pos/shareCode.js'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      visible: false,
      title: '',
      form: {},
      rules: {
        role: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        brand: [{ required: true, message: '请选择小程序', trigger: 'blur' }],
        type: [{ required: true, message: '请选择内容类型', trigger: 'blur' }]
      },
      roleList: [],
      brandList: [],
      typeList: [
        { name: '素材', value: 1 },
        { name: '商品', value: 2 }
      ],
      currentPage: 1,
      pageSize: 20
    }
  },
  methods: {
    //   角色
    async getRoleList() {
      const obj = {
        current: this.currentPage,
        size: this.pageSize
      }
      const res = await shareRoleList(obj)
      if (res.code == 200) {
        this.roleList = res.data.records
      }
    },
    // 引流小程序
    async getBrandList() {
      const res = await brandList()
      if (res.code == 200) {
        this.brandList = res.data
      }
    },
    async handleOk() {
      const that = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          that.visible = false
          // 创建素材分享参数
          that.$emit('createShareRequest',this.form)
          that.form = {}
        } else {
          return false
        }
      })
    },
    close() {
      this.form = {}
    },
    show() {
      this.visible = true
      this.getRoleList()
      this.getBrandList()
    }
  }
}
</script>
      
      <style>
</style>